body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label {
	/* Simple page reset */
	margin: 0;
	padding: 0;
}

body { /* Setting default text color, background and a font stack */
	color: #cccccc;
	font-size: 0.825em;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
}

.tabContainer { /* The UL */
	float: left;
	padding-left: 5px;
}

#contentHolder {
	background-color: #EEEEEE;
	border: 2px solid #FFFFFF;
	height: 700px;
	width: 650px;
	margin: 5px;
	color: #444444;
	padding: 15px;
}

#tabContent {
	background-color: #333;
	border: 1px solid #444;
	margin-top: -15px;
	width: 100%;
}

#tabContent,.tabContainer li a,#contentHolder {
	-webkit-box-shadow: 0 0 2px black;
	-moz-box-shadow: 0 0 2px black;
	box-shadow: 0 0 2px black;
}

.tabContainer li { /* This will arrange the LI-s next to each other */
	display: inline;
}

.tabContainer li a,.tabContainer li a:visited {
	/* Styling the hyperlinks of the tabs as colorful buttons */
	float: left;
	font-size: 18px;
	/* display:block allows for additinal CSS rules to take effect, such as paddings: */
	display: block;
	padding: 7px 16px 1px;
	margin: 4px 5px;
	height: 29px;
	/* Giving positioning */
	position: relative;
	/* CSS3 text-shadow */
	text-shadow: 1px 1px 1px #CCCCCC;
}

#overLine { /* The line above the active button. */
	position: absolute;
	height: 1px;
	background-color: white;
	width: 90px;
	float: left;
	left: 1px;
	top: -5px;
	overflow: hidden;
}

#main {
	margin: 0 auto;
	position: relative;
	width: 700px;
}

ul .left { /* The left span in the hyperlink */
	height: 37px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10px;
}

ul .right { /* The right span in the hyperlink */
	height: 37px;
	right: 0;
	position: absolute;
	top: 0;
	width: 10px;
}

/* Styling the colors individually: */
ul a.green {
	background: url(img/green_mid.png) repeat-x top center;
	color: #24570f;
}

ul a.green span.left {
	background: url(img/green_left.png) no-repeat left top;
}

ul a.green span.right {
	background: url(img/green_right.png) no-repeat right top;
}

ul a.blue {
	background: url(img/blue_mid.png) repeat-x top center;
	color: #03426e;
}

ul a.blue span.left {
	background: url(img/blue_left.png) no-repeat left top;
}

ul a.blue span.right {
	background: url(img/blue_right.png) no-repeat right top;
}

ul a.orange {
	background: url(img/orange_mid.png) repeat-x top center;
	color: #724104;
}

ul a.orange span.left {
	background: url(img/orange_left.png) no-repeat left top;
}

ul a.orange span.right {
	background: url(img/orange_right.png) no-repeat right top;
}

ul a.red {
	background: url(img/red_mid.png) repeat-x top center;
	color: #6f0100;
}

ul a.red span.left {
	background: url(img/red_left.png) no-repeat left top;
}

ul a.red span.right {
	background: url(img/red_right.png) no-repeat right top;
}

/* The hover states: */
ul a:hover {
	background-position: bottom center;
	text-decoration: none;
}

ul a:hover span.left {
	background-position: left bottom;
}

ul a:hover span.right {
	background-position: right bottom;
}

.preloader {
	display: block;
	margin: 120px auto;
}

.clear { /* Old-school clear fix hack to clear the floats: */
	clear: both;
	height: 1px;
	overflow: hidden;
}

/* The styles below are only necessary for the styling of the demo page: */
h1 {
	background: #121b21;
	border-bottom: 1px solid black;
	font-size: 1.5em;
	font-weight: normal;
	margin-bottom: 15px;
	padding: 15px;
	text-align: center;
}

h2 {
	font-size: 0.9em;
	font-weight: normal;
	padding-right: 40px;
	position: relative;
	right: 0;
	text-align: right;
	text-transform: uppercase;
	top: -48px;
}

a,a:visited {
	color: #0196e3;
	text-decoration: none;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

p.tutInfo { /* The tutorial info on the bottom of the page */
	padding: 10px 0;
	text-align: center;
	position: fixed;
	bottom: 0px;
	background: #121b21;
	border-top: 1px solid black;
	width: 100%;
}

h1,h2,p.tutInfo {
	font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
}